<template>
  <div class="relative min-h-screen">
    <!-- 文章页专用背景 -->
    <div v-if="route.path.startsWith('/article/')" class="fixed inset-0 z-2">
      <ui-pattern2 />
    </div>
    <!-- 背景层 - 矩阵雨效果 -->
    <div v-else class="fixed inset-0 z-0">
      <ui-pattern />
    </div>
    <!-- 内容层 -->
    <div class="relative z-9990">
      <Header
        class="fixed top-0 left-0 z-50 h-16 transition-transform duration-300"
        :class="{ '-translate-y-full': isHeaderHidden }"
      />
      <ui-toast-container />
      <div class="pt-16" @click="handlePageClick">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup>
const route = useRoute();
const isHeaderHidden = ref(false);
let lastScrollTop = 0;
function handlePageClick(event) {
  if (!event.target.closest("input, textarea, select")) {
    document.activeElement?.blur();
  }
}
// 监听滚动事件
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

function handleScroll() {
  const currentScrollTop =
    window.pageYOffset || document.documentElement.scrollTop;

  // 判断滚动方向
  if (currentScrollTop > lastScrollTop && currentScrollTop > 50) {
    // 向下滚动且已经滚动了一定距离，隐藏 Header
    isHeaderHidden.value = true;
  } else {
    // 向上滚动，显示 Header
    isHeaderHidden.value = false;
  }

  lastScrollTop = currentScrollTop;
}
</script>

<style scoped>
.skeleton-bg {
  overflow: hidden;
}

.skeleton-effect {
  background-image: linear-gradient(
    105deg,
    #0000 0% 40%,
    rgba(255, 255, 255, 0.4) 50%,
    #0000 60% 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
